import {nanoid, PageContainer} from "@ant-design/pro-components";
import {Button, Form, Input, Space, Table, Tag} from "antd";
import React, {Component} from "react";
import {Link, history} from "umi";
import {ProvinceMenu} from "@/services/Province/ProvinceApi";
import {SubjectsOfSchool} from "@/services/Province/Dashboard";

const SearchModule = (props) => {

  const {onFilterName} = props

  return (
    <Form
      name="basic"
      layout="inline"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      initialValues={{remember: true}}
      onFinish={(values) => {
        onFilterName(values.keyword)
      }}
      autoComplete="off"
    >
      <Space>
        <Form.Item
          name="keyword"
        >
          <Input style={{width: 163}} name="searchValue" placeholder="请输入关键字"/>
        </Form.Item>
        <Button
          type="primary"
          htmlType="submit"
        >
          搜索
        </Button>
        <Button
          type="default"
          onClick={() => {
            onFilterName("")
          }}
        >
          全部
        </Button>
      </Space>
    </Form>
  )
}

class SchoolLists extends Component {

  constructor(props) {
    super(props);
    const school = props.route.name

    this.state = {
      columns: [
        {
          title: '请选择学科或学科群',
          dataIndex: 'name',
          key: 'name',
          render: (text, data, idx) => {
            return <>
              <a href={"/province/subject_detail/01/0/" + data.name+"/"+school}><Button type="link" className="good-content-size">{text}</Button></a>
              {data["percentage"] === "100%" && <Tag color="green">已填报</Tag>}
              {(data["percentage"] && (data["percentage"] !== "100%") && (data["percentage"] !== "0%")) && <Tag color="blue">填报中 {data["percentage"]}</Tag>}
              {data["percentage"] === "0%" && <Tag>未填报</Tag>}
            </>
          },
        },
      ],
      data: [],
      originDataSource: [],
      loading: true
    }
  }
  handleFilter = (keyword) => {
    if (!keyword) keyword = ""
    if (this.state.originDataSource.length === 0) {
      this.state.originDataSource = this.state.data
    }
    console.log(this.state.originDataSource.length)
    this.state.data = this.state.originDataSource.filter((current) => {
      return current.name.indexOf(keyword) !== -1
    })
    this.setState({data: this.state.data})
  }

  componentDidMount() {
    // 获取请求参数
    const pathArr = history.location.pathname.split("/")
    if (pathArr.length > 0) {
      const schoolName = this.props.route.name // 学校名称
      console.log("@学校名称", schoolName)

      SubjectsOfSchool({school: schoolName}).then(res => {
        if (res.status === 0) {
          console.log("@返回数据", res.data)
          let dataSource = []
          for (let i = 0; i < res.data.length; i++) {
            dataSource.push({...res.data[i], key: nanoid()})
          }
          this.setState({loading: false, data: dataSource})
        }
      })

      // console.log("@schoolCode", schoolCode)
      // let dataSource = []
      // for (let i = 0; i < 5; i++) {
      //   dataSource.push({
      //     key: nanoid(),
      //     name: '计算机科学与技术',
      //   })
      // }
      // this.setState({loading: false, data: dataSource})
      // console.log(dataSource)
    }
  }

  render() {
    return (
      <PageContainer header={{
        breadcrumb: {},
      }}
      >
        <Space direction="vertical" size="middle" style={{display: 'flex'}}>
          <SearchModule onFilterName={this.handleFilter}/>
          <Table<any>
            loading={this.state.loading}
            rowKey={(record) => record.key}
            size="small"
            columns={this.state.columns}
            dataSource={this.state.data}
            pagination={{
              // style: { marginBottom: 0 },
              pageSize: 20,
              showSizeChanger: false,
              showQuickJumper: false
            }}
          />
        </Space>
      </PageContainer>
    );
  }
}

export default SchoolLists;
